<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<form name="myForm" action="https://www.baidu.com/s">
	<input autocomplete="off" name="wd" type="text">
	<button>搜索</button>
</form>
<div id="root"></div>

<script>
	// 1- 当input事件触发后会不断的增加script.(解决）
	// 2- 用于接收数据的函数，有可能会将其它人的函数覆盖，或其它人把你定义的函数覆盖。(解决）
	const root = document.querySelector("#root");
	
	// 为名字为myForm表单下的名字为wd的input元素增加input事件
	document.myForm.wd.oninput = function () {
		// 创建一个随机的函数名
		const fnName = "zquery" + Math.random().toString(36).slice(2);
		// 为顶级对象window增加属性，属性的名字是常量fnName的值，属性的值是一个函数
		window[fnName] = function (res) {
			if (res.q) {
				root.innerHTML = res.g.map(item => (`
					<p>${item.q}</p>
				`)).join("");
			} else root.innerHTML = null;
		}
		// 创建一个script元素对象
		const script = document.createElement("script");
		// 增加src属性
		script.src = "https://www.baidu.com/sugrec?prod=pc&wd=" + this.value.trim() + "&cb="+fnName;
		// 将src地址请求完毕后执行该回调函数
		script.onload = function () {
			// console.log("当JS加载完毕后执行");
			document.body.removeChild(script);
			delete window[fnName];
		}
		// 将script元素对象放置body尾部
		document.body.appendChild(script);
	}
</script>
</body>
</html>